// 自定义hooks 
import {  useState } from 'react'
import { nanoid } from 'nanoid';
function useTodos (data) {
    // 接收初始数据，将其声明为状态，同时提供状态操作方法给外界使用
    // 状态在哪里，操作状态的方法就在哪里
    const [todos, setTodos] = useState(data);
      // 添加
      const addTodo = (todo) => {
        if (todo) {
            const newTodos = [{id: nanoid(), title: todo, completed: false},...todos];
            setTodos(newTodos)
        }
    }    
    // 更改选中状态
    const changeState = (e, todo) => {
        const newTodos = todos.map((obj) => {
            if (obj.id === todo.id) {
                obj.completed = e.target.checked
            } 
            return obj;
        });
        setTodos(newTodos)
    }
    // 删除
    const removeTodo = (todo) => {
        const newTodos = todos.filter((obj) => {
            return obj.id !== todo.id;
        })
        setTodos(newTodos)
    }
    // 全选/ 反选
    const CheckAllTodo = (e) => {
        const newTodos = todos.map((obj) => {
            obj.completed = e.target.checked
            return obj
        })
        setTodos(newTodos)
    }
    // 清除已完成
    const clearDoneTodos = () => {
        const newTodos = todos.filter((obj) => {
            return obj.completed === false;
        })
        setTodos(newTodos)
    }
    return {
        todos,
        addTodo,
        changeState,
        removeTodo,
        CheckAllTodo,
        clearDoneTodos
    }
}

export default useTodos